var AttendanceChart = function () {
  var template = /* html */ `
    <div class="attendance-chart-div">
      <slot></slot>
      <div ref="chart" class="attendance-chart"></div>
    </div>
  `;

  return {
    props: {
      attendances: {
        type: Array,
        required: true
      },
      data:{
        type: Object,
        required: true
      },
      zoom: {
        type: Number,
        default: 1
      }
      
    },

    watch: {
      attendances: function () {
        this.showChart();
      }
    },

    computed: {
      maxChartValue: function () {
        var attendances = this.attendances;
        var dimensionsField = this.dimensionsField;
        var maxValue = 0;
        for (var i = 0; i < attendances.length; i++) {
          var attendance = attendances[i];
          for (var j = 0; j < dimensionsField.length; j++) {
            var field = dimensionsField[j];
            var value = attendance[field];
            if (maxValue < value) {
              maxValue = value;
            }
          }
        }

        if (maxValue === 0) {
          return 5;
        }

        maxValue = Math.ceil(_.round(maxValue / 5, 2)) * 5;
        return maxValue;
      }
    },

    data: function () {
      return {
        dimensionsField: ['workshopPresonNum', 'todayOndutyPersonNum', 'latePresonNum', 'earlyPresonNum', 'leavePresonNum',
          'absentPresonNum'
        ]
      };
    },

    mounted: function () {
      this.showChart();
    },

    methods: {
      getChart: function () {
        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          chart = echarts.init(chartDom);
        }
        return chart;
      },

      showChart: function () {
        var chart = this.getChart();
        var chartOption = this.getChartOption();
        this.resetChartOption(chartOption);
        chart.setOption(chartOption, true);
      },

      getChartOption: function () {
        var chartOption = {
          color: window.boardChartColor,
          grid: {
            right: 40,
            left: 40,
            bottom: 30,
            top: 40
          },
          legend: {
            type: 'scroll',
            top: 5,
            textStyle: {
              color: '#44D3E4',
              fontSize: 16
            },
            pageTextStyle: {
              color: '#44D3E4',
              fontSize: 16
            }
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              interval: 0
            }
          }],
          yAxis: [{
            type: 'value',
            min: 0,
            max: 5,
            name: '人数',
            nameGap: 10,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12
            }
          }],
          tooltip: {
            trigger: 'axis'
          },
          dataset: {
            seriesLayoutBy: 'row',
            source: []
          },
          series: []
        };
        return chartOption;
      },

      resetChartOption: function (chartOption) {
        var self = this;
        var attendances = this.attendances;
        var dimensionsField = this.dimensionsField;
        var dimensions = ['product'];
        var dimensionsFieldName = _.map(dimensionsField, function (field) {
          return self.getFieldName(field);
        });
        dimensions.pushArray(dimensionsFieldName);

        var source = [dimensions];
        var series = [];
        for (var i = 0; i < attendances.length; i++) {
          var attendance = attendances[i];
          var data = [attendance.deptWork];
          for (var j = 0; j < dimensionsField.length; j++) {
            var field = dimensionsField[j];
            data.push(attendance[field]);
          }
          source.push(data);
          series.push({
            type: 'line'
          });
        }

        _.set(chartOption, 'yAxis[0].max', this.maxChartValue);
        _.set(chartOption, 'dataset.source', source);
        chartOption.series = series;
      },

      getFieldName: function (field) {
        var obj = {
          workshopPresonNum: "车间人数",
          todayOndutyPersonNum: "上班人数",
          latePresonNum: "迟到人数",
          earlyPresonNum: "早退人数",
          leavePresonNum: "请假人数",
          absentPresonNum: "旷工人数"
        };
        return obj[field];
      }
    },

    template: template
  };
}();
